<template>
  <div class="content">
    <div class="header">
      <div class="header-left">
        <img @click="sidebarShow = !sidebarShow" class="menu" src="@/static/1.png" mode="" />
        <div class=" logo">
          <img class="logo-img" src="@/static/16.png" mode="" />
        </div>
      </div>
      <div class=" header-right-con">
        <div class="localeChange" @click="onLocaleChange">
          <img class="language" src="@/static/language.png" mode="" />
          <text>{{ $t('language') }}</text>
        </div>
        <div class=" header-right">{{ $t('connect') }}
        </div>
      </div>
    </div>
    <Sidebar :sidebarShow="sidebarShow" @closure="closure" @invite="invite" class="sidebar"></Sidebar>
    <div class="chain-top">
      <img v-if="$i18n.locale == 'en'" class="text-img" src="@/static/2.png" mode="" />
      <img v-else class=" text-img" src="@/static/2-1cn.png" mode="" />
      <img class=" user-img" src="@/static/user.png" mode="" />
    </div>
    <div class=" chain-intro">
      <div class="intro-text">{{ $t('introduce') }}</div>
      <div class="intro-text">{{ $t('introduce1') }}</div>
      <div class="intro-text">{{ $t('introduce2') }}</div>
      <div class="roadmap">{{ $t('path') }}</div>
      <div class="intro-text">{{ $t('target') }}</div>
      <scroll-div scroll-y="true" class="scroll-con">
        <div class="line"></div>
        <div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">
          <text class="item-per">{{ item.per }}%</text>
          <text class="item-text">{{ item.text }}</text>
        </div>
      </scroll-div>
    </div>
    <div class="user-list">
      <div class="user-item" v-for="(val, i) in userList" :key="i">
        <div class="item-logo">
          <img class="img" src="@/static/16.png" mode="" />
        </div>
        <div class="user-con">
          <div class="swiper-con">
            <swiper class="swiper" circular autoplay :interval="2000"
              v-if="$i18n.locale == 'en' || $i18n.locale == 'cn' && i != 1">
              <swiper-item v-for="(item, index) in val.imgs">
                <!-- <div class="get-con" v-if="i == 1">
									<div class="get">{{$t('get')}}：</div>
									<div class="num">
										<div class="">420000000</div>
										<img class="getimg" src="@/static/16.png" mode="" />
									</div>
								</div> -->
                <img class="img" :src="item" mode="" />
              </swiper-item>
            </swiper>
            <swiper class="swiper" circular autoplay :interval="2000" v-if="$i18n.locale == 'cn' && i == 1">
              <swiper-item v-for="(item, index) in val.imgsCn">
                <img class="img" :src="item" mode="" />
              </swiper-item>
            </swiper>
          </div>
          <div class="user-con-right" :class="{ 'right7': i == 6 }">
            <div class="title">{{ val.title }}</div>
            <div class="right-info" v-if="i == 0">
              <div class="right-item">{{ $t('supply') }}: 10000</div>
              <div class="right-item">{{ $t('consume') }}: 450000000 RND</div>
              <div class="right-item">{{ $t('property') }}:</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
              <div class="right-item">{{ $t('site') }}: 0/5</div>
            </div>
            <!-- <div class="right-info" v-if="i == 1">
							<div class="right-item">{{$t('burn')}}:{{$t('aSheet')}}</div>
							<div class="right-item">{{$t('noOperation')}}</div>
						</div> -->
            <div class="right-info" v-if="i == 1">
              <div class="right-item">{{ $t('supply') }}: 10000</div>
              <div class="right-item">{{ $t('price') }}: 0.013ETH</div>
              <div class="right-item">{{ $t('get') }}:{{ $t('eachA') }}</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('growingFuel') }}</div>
              <div class="right-item">{{ $t('site') }}: 0/10</div>
            </div>
            <div class="right-info right2-6" v-if="i == 2">
              <div class="right-item">{{ $t('supply') }}: {{ $t('iteminfo4-1') }}</div>
              <div class="right-item">{{ $t('burn') }}: {{ $t('aSheet') }}</div>
              <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo4-3') }}</div>
              <div class="right-item">{{ $t('property') }}: ???</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-4') }}</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo4-5') }}</div>
            </div>
            <div class="right-info" v-if="i == 3">
              <div class="right-item">{{ $t('supply') }}:???</div>
              <div class="right-item">{{ $t('burn') }}: ?00000000RND</div>
              <div class="right-item">{{ $t('function') }}:{{ $t('iteminfo5-1') }}</div>
            </div>
            <div class="right-info" v-if="i == 4">
              <div class="right-item">{{ $t('supply') }}: ???</div>
              <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo6-1') }}</div>
              <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo6-2') }}</div>
              <div class="right-item">{{ $t('property') }}: ???</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo6-3') }}</div>
            </div>
            <div class="right-info" v-if="i == 5">
              <div class="right-item">{{ $t('burn') }}:?0000000ORND</div>
              <div class="right-item">{{ $t('function') }}: ?</div>
            </div>
            <div class="right-info right2-6-6" v-if="i == 6">
              <div class="right-item">{{ $t('supply') }}:{{ $t('iteminfo8-1') }}</div>
              <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo8-2') }}</div>
              <div class="right-item">{{ $t('burn') }}: {{ $t('iteminfo8-3') }}</div>
              <div class="right-item">{{ $t('property') }}:???</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('iteminfo8-4') }}</div>
              <div class="right-item">{{ $t('function') }}: {{ $t('canGrow') }}</div>
              <div class="right-item">{{ $t('function') }}:{{ $t('iteminfo4-5') }}</div>
              <div class="right-item">{{ $t('function') }}:{{ $t('iteminfo8-5') }}</div>
              <div class="right-item">{{ $t('function') }}:???</div>
            </div>
            <div class="right-info" v-if="i == 7">
              <div class="right-item">{{ $t('burn') }}: ?</div>
              <div class="right-item">{{ $t('function') }}: ?</div>
            </div>
          </div>
        </div>
        <div class="quantity">
          <QuantityStatistics v-if="val.type == 1" @subBtn="subfun" @addBtn="addfun"></QuantityStatistics>
        </div>
        <div class="btn" :class="{ 'active-btn': i > 1 }">{{ val.btnText }}</div>
      </div>
    </div>
    <div class="invite-box" v-if="inviteShow">
      <div class="invite-con">
        <img class="close-btn" src="../../static/colse.png" @click="inviteShow = false" mode="" />
        <img class=" copy-btn" src="../../static/copy.png" @click="copy('df45fddsf4sd5ds78f4ds5f4d8f4f1dsf')" mode="" />
        <div class="invite-item">
          <text>{{ $t('youInvitee') }}: </text>
          <input class="invitee-input" type="text">
        </div>
        <text class="btn">{{ $t('bind') }}</text>
        <div class="invite-item youLink">
          <div>{{ $t('youLink') }}: <text class="youLink-text">df45fddsf4sd5ds78f4ds5f4d8f4f1dsf</text></div>
        </div>
        <text class="btn">{{ $t('generate') }}</text>
      </div>
    </div>
  </div>
</template>

<script>
import QuantityStatistics from '@/components/quantityStatistics.vue'
import Sidebar from '@/components/sidebar.vue'
import { utils } from 'web3'
import useWallet from '../hooks/useWallte'
import { USDT_API } from '../web3/abis'
import { USDT_ADDRESS } from '../web3/config'
const {
  onConnect,
  connected,
  web3,
  userAddress,
  chainId,
  networkId,
  resetApp,
  assets,
  getAccountAssets,
} = useWallet()


export default {
  components: {
    QuantityStatistics,
    Sidebar
  },
  computed: {
    scrollArr() {
      return [
        { per: 10, text: this.$t('percentage10') },
        { per: 20, text: this.$t('percentage20') },
        { per: 30, text: this.$t('percentage30') },
        { per: 40, text: this.$t('percentage40') },
        { per: 50, text: this.$t('percentage50') },
        { per: 60, text: this.$t('percentage60') },
        { per: 70, text: this.$t('percentage70') },
        { per: 80, text: this.$t('percentage80') },
        { per: 90, text: this.$t('percentage90') },
        { per: 100, text: this.$t('percentage100') }
      ]
    },
    userList() {
      return [
        {
          type: 1,
          btnType: 1,
          btnText: this.$t('cast'),
          title: this.$t('listName1'),
          imgs: [require('@/static/4-1.png'), require('@/static/4-2.png'), require('@/static/4-3.png'), require('@/static/4-4.png'), require('@/static/4-5.png')]
        },
        // {
        // 	type:2,
        // 	btnType:2,
        // 	btnText:this.$t('removePledge'),
        // 	title:this.$t('listName2'),
        // 	imgs:[require('@/static/3.png')]
        // },
        {
          type: 1,
          btnType: 3,
          btnText: this.$t('cast'),
          title: this.$t('listName3'),
          imgs: [require('@/static/3-1.png'), require('@/static/3-2.png'), require('@/static/3-3.png'), require('@/static/3-4.png'), require('@/static/3-5.png')],
          imgsCn: [require('@/static/3-1-cn.png'), require('@/static/3-2-cn.png'), require('@/static/3-3-cn.png'), require('@/static/3-4-cn.png'), require('@/static/3-5-cn.png')]
        },
        {
          type: 2,
          btnType: 3,
          btnText: this.$t('cast'),
          title: this.$t('listName4'),
          imgs: [require('@/static/horse.png')]
        },
        {
          type: 2,
          btnType: 3,
          btnText: this.$t('cast'),
          title: this.$t('listName5'),
          imgs: [require('@/static/9.png')]
        },
        {
          type: 2,
          btnType: 3,
          btnText: this.$t('cast'),
          title: this.$t('listName6'),
          imgs: [require('@/static/horse-1.png')]
        },
        {
          type: 2,
          btnType: 3,
          btnText: this.$t('cast'),
          title: '???',
          imgs: [require('@/static/9.png')]
        },
        {
          type: 2,
          btnType: 3,
          btnText: this.$t('cast'),
          title: this.$t('listName8'),
          imgs: [require('@/static/horse-2.png')]
        },
        {
          type: 2,
          btnType: 3,
          btnText: this.$t('cast'),
          title: this.$t('listName9'),
          imgs: [require('@/static/9.png')]
        },
      ]
    },
    contract() {
      return new web3.value.eth.Contract(USDT_API, USDT_ADDRESS)
    },
  },
  data() {
    return {
      sidebarShow: false,
      inviteShow: false,
      num: 0,

    }
  },

  methods: {
    onLocaleChange() {
      let language_key = localStorage.getItem('language_key')
      let value
      if (language_key) {
        value = language_key == 'en' ? 'cn' : 'en'
      } else {
        value = 'cn'
      }
      localStorage.setItem('language_key', value)
      this.$i18n.locale = value
    },
    addfun(param) {
      console.log(param)
    },
    subfun(param) {
      console.log(param)
    },
    closure(param) {
      this.sidebarShow = param
    },
    invite(param) {
      this.inviteShow = param
    },
    // 复制
    copy(value) {

      // uni.setClipboardData({
      // 	data: value,
      // 	success: () => {
      // 		uni.showToast({
      // 			title: '复制成功'
      // 		})
      // 	}
      // })
    },
    async handleWalletConnect() {
      await onConnect()
      if (connected) {
        console.log('afterConnectdWallet', connected)
      }
    },
    approve() {
      return contract.value.methods
        .approve(USDT_ADDRESS, utils.toHex(utils.toWei('1000000000000000000000000000', 'gwei')))
        .send({ from: userAddress.value })
    }
  }
}
</script>

<style lang="scss">
.header {
  height: 120px;
  width: 94%;
  background-color: #059EA3;
  display: flex;
  justify-content: space-between;
  padding: 0 3%;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;

  .header-left {
    display: flex;
    align-items: center;

    .menu {
      width: 80px;
      height: 90px;
    }

    .logo {
      width: 50px;
      height: 50px;
      margin-left: 20px;

      .logo-img {
        width: 50px;
        height: 50px;
        border: 4px solid #90CAA1;
        border-radius: 40px;
      }
    }
  }

  .header-right {
    font-size: 40px;
    text-align: center;
    color: #f5f5f5;
    border-radius: 30px;
    line-height: 80px;
    background-color: #FB8DD4;
    height: 90px;
    width: 190px;
  }

  .header-right-con {
    display: flex;
    align-items: center;
    color: #fff;

    .localeChange {
      display: flex;
      align-items: center;
      margin-right: 18px;
    }
  }

  .language {
    width: 50px;
    height: 50px;
    margin-right: 6px;
  }
}

.sidebar {
  position: fixed;
  top: 120px;
  left: 0;
  z-index: 101;
}

.chain-top {
  padding-top: 120px;
  height: 700px;
  background-color: #71C9F9;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .text-img {
    width: 540px;
    height: 230px;
    margin-top: 40px;
    margin-left: 120px;
  }

  .user-img {
    width: 320px;
  }
}

.chain-intro {
  background: #059EA3;
  padding-bottom: 30px;

  .intro-text {
    padding: 20px 40px;
    color: #B2EEF1;
    line-height: 50px;
    text-indent: 30px;
    font-size: 27px;

    .rnd {
      color: #D1FE86;
      margin: 0 10px;
    }
  }

  .roadmap {
    color: #F1FEFE;
    font-size: 32px;
    font-weight: bold;
    margin-left: 20px;
  }

  .scroll-con {
    border: 10px solid #068C91;
    height: 300px;
    width: 94%;
    margin-left: 2%;
    margin-bottom: 20px;

    .line {
      height: 3px;
      width: 96%;
      margin-left: 10px;
      background-color: #fff;
      position: absolute;
      top: 48px;
    }

    .scroll-item {
      font-size: 30px;
      color: #000;
      padding: 0 10px;
      margin-top: 30px;
      display: flex;
      align-items: flex-start;

      .item-per {
        color: #C5F387;
        display: inline-block;
        width: 12%;
      }

      .item-text {
        display: inline-block;
        width: 88%;
      }
    }
  }
}

.user-list {
  background-color: #69C4F9;
  padding-top: 80px;
  padding-bottom: 100px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .user-item {
    height: 490px;
    width: 660px;
    border-radius: 40px;
    border: 10px solid #029A9D;
    background-color: #76CFD5;
    padding: 0 30px;
    padding-right: 0;
    position: relative;
    margin-bottom: 80px;

    .item-logo {
      width: 60px;
      height: 60px;
      position: absolute;
      top: -40px;
      left: 45%;

      .img {
        width: 60px;
        height: 60px;
        border: 6px solid #0299A6;
        border-radius: 40px;
      }
    }

    .user-con {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      .swiper-con {
        width: 260px;
        height: 260px;
        border: 8px solid #0299A6;
        border-radius: 40px;
        overflow: hidden;
        position: relative;
        z-index: 99;

        .img {
          width: 260px;
          height: 260px;
        }

        .get-con {
          position: absolute;
          top: 56px;
          left: 20px;
          z-index: 1;
        }

        .get {
          font-size: 40px;
          font-weight: bold;
        }

        .num {
          display: flex;
          align-items: center;
          margin-top: 20px;
          font-size: 28px;
          font-weight: bold;
        }

        .getimg {
          width: 30px;
          height: 30px;
          margin-left: 8px;
        }
      }

      .user-con-right {
        width: 58%;
        margin-top: 20px;
        font-size: 28px;

        .title {
          font-size: 34px;
          font-weight: bold;
          margin-bottom: 10px;
          text-align: center;
        }

        .right-info {
          margin-left: 36px;
          font-size: 24px;

          .right-item {
            margin-bottom: 4px;
          }
        }

        .right2-6 {
          margin-left: 10px;
        }

        .right2-6-6 {
          margin-left: 0;
        }
      }

      .right7 {
        margin-top: 0;
      }
    }

    .quantity {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }

    .btn {
      width: 380px;
      height: 90px;
      color: #EDF90B;
      font-size: 34px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40px;
      background: #03989E;
      position: absolute;
      left: 150px;
      bottom: 10px;
    }

    .active-btn {
      color: #A6A6A6;
    }
  }
}

.invite-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;

  .invite-con {
    min-height: 380px;
    width: 630px;
    border-radius: 40px;
    border: 10px solid #029A9D;
    background-color: #76CFD5;
    padding: 0 30px;
    position: relative;
    padding-top: 100px;
    padding-bottom: 40px;

    .close-btn {
      width: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .copy-btn {
      width: 70px;
      height: 70px;
      position: absolute;
      bottom: 60px;
      right: 40px;
    }

    .invite-item {
      display: flex;
    }

    .invitee-input {
      border: 2px solid #279491;
      padding: 4px 8px;
      width: 380px;
      margin-left: 20px;
    }

    .btn {
      padding: 0 20px;
      color: #fff;
      background-color: #069EA3;
      border-radius: 26px;
      display: inline-block;
      height: 76px;
      line-height: 70px;
      margin-top: 40px;
      margin-left: 240px;
    }
  }

  .youLink {
    margin-top: 40px;
    word-break: break-all;

    .youLink-text {
      color: #fff;
      margin-left: 10px;
    }
  }
}
</style>
